import React,{Component} from 'react';
import { Timeline, Icon } from 'antd';
import './logistics.scss';
import { getExpressInfo } from 'api/order.js';
import { message } from 'antd'
export default class Logistics extends Component{
	constructor(props) {
    super(props);
    this.state = {
      head_info: '',
      buzhou: []
    }
	}
  goBack = () => {
    this.props.history.goBack()
  }
  componentDidMount () {
    getExpressInfo({
      order_id: this.props.location.state ? this.props.location.state.orderId : 'DD-70141-600063-102-20180301101410-0001'
    }).then(res => {
      if (res.code === -403) {
        this.props.histroy.push('/')
      }
      if (res.code === 1){
        this.setState({
          head_info: res.data.head_info,
          buzhou: res.data.express_info
        })
      } else {
        message.error(res.message, 3)
      }
    })
  }
  render() {
    return (
      <div className="logistics">
        <div className="news_title"><div onClick={this.goBack}><span className="glyphicon glyphicon-back back"></span></div>查看物流</div>
        <div className="log_info">
          <p>{this.state.head_info === '' ? '暂无物流信息' : this.state.head_info.express_company}：</p>
          <p>{this.props.location.state ? this.props.location.state.orderId : 'DD-70141-600063-102-20180301101410-0001'}</p>
        </div>
        <div className="timeLine">
          {/*<div className="time_title">
            <i className="glyphicon glyphicon-location"></i><p>[收货地址]浙江省杭州市三墩镇北部软件园45号盘石新经济大厦6楼研发中心</p>
          </div>*/}
          <Timeline>
            {this.state.buzhou.map((item, index) => {
              return (
                <Timeline.Item color="#ddd" key={index} dot={index === this.state.buzhou.length - 1 ? <Icon type="down-circle" style={{ fontSize: '14px',color:'#DF1212' }} /> : ''} className='time_line'>
                  <div className='myTime'>
                    <div className='myDay'>{item.day}</div>
                    <div className='myHour'>{item.hour}</div>
                  </div>
                  {item.description}
                </Timeline.Item>
              )
            })}
          </Timeline>
        </div>
        <div className="bg"></div>
      </div>
    )
  }
}